
import { Space, Table, Tag } from 'antd';
import type { TableProps } from 'antd';
import request from '../../api/request'
import { useEffect, useState } from 'react';
import type { FormProps } from 'antd';
import { Button, Checkbox, Form, Input } from 'antd';
function Index() {
    interface DataType {
        key: string;
        content: string;
        age: number;
        title: string;
        updatedAt: string;
        tags: string[];
    }
    type FieldType = {
        title: string
    };

    const [data, setdata] = useState('')
    const [total, setTotal] = useState(1)
    const [title, setTitle] = useState('')
    const getList = async (title) => {
        const res = await request.get('article/list', {
            params: {
                page: 1,//页码
                pageSize: 6,//每页显示条数
                keyword: title

            }
        })
        console.log(res);
        setdata(res.data.rows)
        setTotal(res.data.count)

    }
    useEffect(() => {
        getList()
    }, [])

    const columns: TableProps<DataType>['columns'] = [
        {
            title: 'content',
            dataIndex: 'content',
            key: 'content',
            render: (text) => <a>{text}</a>,
        },
        {
            title: 'title',
            dataIndex: 'title',
            key: 'title',
        },
        {
            title: 'updatedAt',
            dataIndex: 'updatedAt',
            key: 'updatedAt',
        },
        {
            title: 'id',
            dataIndex: 'id',
            key: 'id',
        },

        {
            title: 'Action',
            key: 'action',
            render: (_, record) => (
                <Space size="middle">
                    <a>Invite {record.name}</a>
                    <a>Delete</a>
                </Space>
            ),
        },
    ];

    const onFinish: FormProps<FieldType>['onFinish'] = (values) => {
        console.log('Success:', values);
        let {title}=values
        getList(title)
    };
    return (
        <div>
            <div>
                <Form
                    layout='inline'
                    name="basic"
                    labelCol={{ span: 8 }}
                    wrapperCol={{ span: 16 }}
                    style={{ maxWidth: 600 }}
                    initialValues={{ remember: true }}
                    onFinish={onFinish}
                    autoComplete="off"
                >
                    <Form.Item<FieldType>
                        label="title"
                        name="title"

                    >
                        <Input />
                    </Form.Item>

                    <Form.Item label={null}>
                        <Button type="primary" htmlType="submit">
                            Submit
                        </Button>
                    </Form.Item>
                </Form>
            </div>
            <Table<DataType> columns={columns} dataSource={data}
                pagination={{
                    total: total,
                    showSizeChanger: true,
                    showQuickJumper: true,
                    showTotal: (total) => `Total ${total} items`
                }}
            />;
        </div>
    )
}

export default Index
